import React, { PureComponent } from 'react';
import { connect } from 'dva';
import {
    Form,
    Input,
    Card,
    Tag,
    Row,
    Col,
    Modal,
    Collapse,
    Radio,
    InputNumber,
    Switch,
    Spin
} from 'antd';

import styles from './CustomerList.less';

const Panel = Collapse.Panel;
const FormItem = Form.Item;

const formItemLayout = {
    labelCol: {
        span: 6,
    },
    wrapperCol: {
        span: 18,
    },
};


@connect(({ system, channel }) => ({
    system, channel 
}))
@Form.create()
export default class ChannelProductEditor extends PureComponent {

    constructor(props) {
        super(props);
    }

    state = {
        openState: false, 
        isSwitchOn: false,
        // channelDetailsState: '',
    }

    componentDidMount() {
        const { dispatch, location } = this.props;

        // const params = querystring.parse(location.search.slice(1));
        // this.setState({
        //     openState: productList.relateChannel == 1 ? true : false
        // }) 
        // console.log("handleProductState", this.state.openState)
        const { channel: { channelDetailValue } } = this.props;
        if(channelDetailValue&&channelDetailValue.branchId){
          dispatch({
            type: 'channel/getProductDiviList',
            payload:{
              branchId: channelDetailValue.branchId
            }
          });
        }
    }

    handlePriceLow = (item, value) => {
        const { dispatch } = this.props;
        const {channelDetailsState} = this.props;
        // console.log("item1111", item)
        item.priceLow = value;
        if(channelDetailsState == 3){//新增
            dispatch({
                type: 'channel/changeAddProduct',
                payload: {
                    item
                },
            })
        }
        if(channelDetailsState == 4){//编辑
            dispatch({
                type: 'channel/changeUpdateProduct',
                payload: {
                    item
                },
            })
        }
    }

    handlePriceHigh = (item, value) => {
        const { dispatch } = this.props;
        const {channelDetailsState} = this.props;
        // console.log("item2222", item)
        item.priceHigh = value;
        if(channelDetailsState == 3){//新增
            dispatch({
                type: 'channel/changeAddProduct',
                payload: {
                    item
                },
            })
        }
        if(channelDetailsState == 4){//编辑
            dispatch({
                type: 'channel/changeUpdateProduct',
                payload: {
                    item
                },
            })
        }
       
    }

    handleTime = (item) => {
        if (item.timeValid == 0) {
            return `${item.beginTime} - ${item.endTime}`
        } else {
            return `${item.beginTime} - 永久`
        }
    }

    renderPanelContent = (item, channelDetailsState, index) => {

        const { productDiviList } = item;
        const { getFieldDecorator } = this.props.form;

        return (<div>
            <Form key={index}>
                <Card>
                    <Row>
                        <Col span={8}>
                            <FormItem label="产品名称"
                                {...formItemLayout}>
                                {item.productName}
                            </FormItem>
                        </Col>
                        <Col span={8}>
                            <FormItem label="产品种类"
                                {...formItemLayout}>
                                {item.productType == 1 ? "分期" : "贷款"}
                            </FormItem>
                        </Col>
                        <Col span={8}>
                            <FormItem label="产品有效期"
                                {...formItemLayout}>
                                {/* {item.beginTime} */}
                                {this.handleTime(item)}
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={24}>
                            <FormItem label="产品描述"
                                labelCol={{ span: 2 }}
                                wrapperCol={{ span: 22 }}>
                                {item.productDesc}
                            </FormItem>
                        </Col>
                    </Row>
                </Card>
                <Card>
                    {productDiviList&&productDiviList.map((diviItem, index) => {
                        return <div>
                            <Row key={index}>
                                <Col span={8}>
                                    <FormItem label={`${diviItem.nper}期价格`}
                                        {...formItemLayout}>
                                        {diviItem.price}%

                                    </FormItem>
                                </Col>
                                <Col span={16}>
                                    <div>
                                        {channelDetailsState == 3 || channelDetailsState == 4 ?
                                            <FormItem label={`销售价格(${diviItem.nper}期)`}
                                                labelCol={{ span: 4 }}
                                                wrapperCol={{ span: 20 }}
                                            >
                                                <div>
                                                    <InputNumber
                                                        value={diviItem.priceLow}
                                                        disabled={item.relateChannel == 1 ? false : true}
                                                        onChange={this.handlePriceLow.bind(this, diviItem)} />
                                                    <span style={{ marginLeft: '10px' }}>~</span>
                                                    <InputNumber
                                                        value={diviItem.priceHigh}
                                                        disabled={item.relateChannel == 1 ? false : true}
                                                        onChange={this.handlePriceHigh.bind(this, diviItem)}
                                                        style={{ marginLeft: '10px' }} />%
                                                    </div>
                                            </FormItem>
                                            :
                                            <FormItem label={`销售价格(${diviItem.nper}期)`}
                                                labelCol={{ span: 4 }}
                                                wrapperCol={{ span: 20 }}
                                            >
                                                <div>
                                                    {diviItem.priceLow}%
                                                        <span style={{ marginLeft: '10px', marginRight: '10px' }}>~</span>
                                                    {diviItem.priceHigh}%
                                                    </div>
                                            </FormItem>
                                        }

                                    </div>
                                    {/* // } */}
                                </Col>
                            </Row>
                        </div>
                    })}
                </Card>
            </Form>
        </div>);
    }

    handleSwitchChange = (item, channelDetailsState) => {
        Modal.confirm({
            title: `你确定要${item.relateChannel != 1 ? '打开' : '关闭'}这个产品吗？`,
            okText: '确认',
            cancelText: '取消',
            onOk: () => {
                if (channelDetailsState == 3) {//渠道新增
                    item.relateChannel = item.relateChannel == 1 ? null : 1;
                    const { dispatch } = this.props;
                    dispatch({
                        type: 'channel/changeAddProduct',
                        payload: {
                            item
                        },
                    });
                } else {//渠道修改
                    item.relateChannel = item.relateChannel == 1 ? null : 1;
                    const { dispatch } = this.props;
                    dispatch({
                        type: 'channel/changeUpdateProduct',
                        payload: {
                            item
                        },
                    });
                }
            },
        });
    }

    renderPanelTitle = (item, channelDetailsState) => {
        return (<Row>
            <Col span={4}><span style={{
            }}>{item.productName}</span>
            </Col>
            <div>
                <Col span={3} style={{ textAlign: 'center' }} >
                    {/* {!this.state.openState ? */}
                    {item.relateChannel == 1 ?
                        <Tag color="green" size="large">开</Tag>
                        :
                        <Tag color="red" size="large">关</Tag> 
                    }
                </Col>
                <div style={{ float: 'right', marginRight: '40px' }} onClick={(e) => {
                    e.stopPropagation();
                }}>
                    {channelDetailsState == 3 || channelDetailsState == 4 ?
                        <Switch
                            checked={item.relateChannel == 1 ? true : false}
                            checkedChildren="开"
                            unCheckedChildren="关"
                            onChange={() => this.handleSwitchChange(item, channelDetailsState)} />
                        :
                        null
                    }
                </div>
            </div>
        </Row>);
    }

    render() {
        const { system, channel } = this.props; 
        const {channelDetailsState} = this.props;
        const channelDetailsProductList = this.props.channelDetailsProductList ? this.props.channelDetailsProductList : null;

        const { channelDetails, channelProductDiviList, channelProductLoading, channelLoading } = channel;

        // const activeKey = productList && productList.length > 0 ? productList && productList[0].id : null;
        //状态channelDetailsState 1：渠道详情  2：渠道审核  3：渠道新增和编辑 4：配置管理添加组织的新增和编辑
        return (
            <div>
                
                {channelProductLoading ?
                    <div className={styles.spinContainer}>
                        <Spin size="large" />
                    </div>
                    :
                    <div>
                        {channelDetailsState == 3 ?
                            channelProductDiviList &&
                            <Collapse bordered={true} key={channelProductDiviList.id}>{/*defaultActiveKey={activeKey}*/}
                                {channelProductDiviList.map((item, index) => {
                                    return <Panel
                                        key={index}
                                        header={this.renderPanelTitle(item, channelDetailsState)} key={item.id}>
                                        {this.renderPanelContent(item, channelDetailsState, index)}
                                    </Panel>
                                })}
                            </Collapse>
                            :
                            channelDetails.productList &&
                            <Collapse bordered={true} key={channelDetails.productList.id}>{/*defaultActiveKey={activeKey}*/}
                                {channelDetails.productList.map((item, index) => {
                                    return <Panel
                                        key={index}
                                        header={this.renderPanelTitle(item, channelDetailsState)} key={item.id}>
                                        {this.renderPanelContent(item, channelDetailsState, index)}
                                    </Panel>
                                })}
                            </Collapse>
                        }

                    </div>
                }
            </div>
        );
    }

}
